{% extends "base.html" %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold">流程列表</h1>
        <button onclick="createNewFlow()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            创建新流程
        </button>
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full bg-white border rounded-lg">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        名称
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        描述
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        创建时间
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        更新时间
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        操作
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200" id="flowsTable">
                <!-- 流程列表将通过JavaScript动态加载 -->
            </tbody>
        </table>
    </div>
</div>

<!-- 创建流程的模态框 -->
<div id="createFlowModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg font-medium text-gray-900">创建新流程</h3>
            <div class="mt-2">
                <input type="text" id="flowName" placeholder="流程名称" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                <textarea id="flowDescription" placeholder="流程描述" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
            </div>
            <div class="mt-4 flex justify-end">
                <button onclick="closeCreateModal()" class="px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 mr-2">
                    取消
                </button>
                <button onclick="submitCreateFlow()" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                    创建
                </button>
            </div>
        </div>
    </div>
</div>

<script>
async function loadFlows() {
    try {
        const response = await fetch('/api/flows');
        const flows = await response.json();
        
        const tbody = document.getElementById('flowsTable');
        tbody.innerHTML = flows.map(flow => `
            <tr class="hover:bg-gray-50">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    ${flow.name}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    ${flow.description || ''}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    ${new Date(flow.created_at).toLocaleString('zh-CN')}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    ${new Date(flow.updated_at).toLocaleString('zh-CN')}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <button onclick="editFlow(${flow.id})" class="text-blue-600 hover:text-blue-800 mr-2">
                        编辑
                    </button>
                    <button onclick="deleteFlow(${flow.id})" class="text-red-600 hover:text-red-800">
                        删除
                    </button>
                </td>
            </tr>
        `).join('');
    } catch (error) {
        console.error('Error loading flows:', error);
    }
}

function createNewFlow() {
    document.getElementById('createFlowModal').classList.remove('hidden');
}

function closeCreateModal() {
    document.getElementById('createFlowModal').classList.add('hidden');
}

async function submitCreateFlow() {
    const name = document.getElementById('flowName').value;
    const description = document.getElementById('flowDescription').value;
    
    try {
        const response = await fetch('/api/flows', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ name, description })
        });
        
        if (response.ok) {
            closeCreateModal();
            loadFlows();
        }
    } catch (error) {
        console.error('Error creating flow:', error);
    }
}

function editFlow(flowId) {
    window.location.href = `/flow-editor/${flowId}`;
}

async function deleteFlow(flowId) {
    if (confirm('确定要删除这个流程吗？')) {
        try {
            const response = await fetch(`/api/flows/${flowId}`, {
                method: 'DELETE'
            });
            
            if (response.ok) {
                loadFlows();
            }
        } catch (error) {
            console.error('Error deleting flow:', error);
        }
    }
}

// 页面加载时加载流程列表
loadFlows();
</script>
{% endblock %} 